<template>
  <div ref="time_ech" class="time-ech" style="  width: 100%;
  height: 85%;"></div>
</template>

<script>
import * as echarts from "echarts";
import { mapState } from 'vuex';
export default {
  data() {
    return {
      chartInstance: null,
    };
  },
  computed: {
 ...mapState(['theme'])
  },
  methods: {
    initChart() {
      // 初始化对象
     this.chartInstance = echarts.init(this.$refs.time_ech,this.theme);
      let data = [
        {
          name: "违规插拔存储",
          value: 6181,
        },
        {
          name: "端口扫描",
          value: 4386,
        },
        {
          name: "端口扫描",
          value: 4055,
        },
        {
          name: "设备异常",
          value: 2467,
        },
        {
          name: "重点关注用户",
          value: 3244,
        },
        {
          name: "设备异常插拔",
          value: 4898,
        },
        {
          name: "嫌疑运维人员",
          value: 1484,
        },
        {
          name: "违规插拔存储介质",
          value: 1112,
        },
        {
          name: "重点关注对象",
          value: 965,
        },
      ];
      let newarr = [];

      data.forEach((item) => {
        newarr.push([
          [
            Number(Number(Math.random() * 150).toFixed(2)),
            Number(Number(Math.random() * 100).toFixed(2)),
            item.name,
            item.value,
          ],
        ]);
      });
      let series = [];
      newarr.forEach((item, index) => {
        series.push({
          type: "scatter",
          data: item,
          symbolSize: 0,
          label: {
            show: true,
            minMargin: 2,
            formatter: (params) => {
              return params.data[2];
            },
            fontWeight:500
          },
          itemStyle: {
            color: function (params) {
        
            },
     
          },
        });
        series[index].label.fontSize = (function () {
         return (1.3+Math.floor(item[0][3] /1000)*0.3) +'rem'
        })()
         
        series[index].label.color =
          "rgb(" +
          [
            Math.round(Math.random() * 255) + 1,
            Math.round(Math.random() * 255) + 1,
            Math.round(Math.random() * 255) + 1,
          ].join(",") +
          ")";
      });

      let option = {
        grid: {
          top: '10%',
          right: 0,
          left: 0,
          bottom: "15%",
          containLabel:true
        },
        //  colorBy:'data',
        dataZoom: {},
        xAxis: {
          type: "value",
          scale: true,
          show: false,
        },
        yAxis: {
          type: "value",
          scale: true,
          show: false,
        },
        series: series,
      };
      this.chartInstance.setOption(option);
    },
  },
  mounted() {
    this.initChart();
        // 添加随页面变化而变化
    window.addEventListener('resize', () => {
       this.chartInstance.resize()
    })
  },
    destroyed () {
    window.removeEventListener("resize", () => {
      this.chartInstance.resize();
    });
  },
       watch: {
    theme(newValue, oldValue) {
      this.chartInstance.dispose()
      this.initChart()

    }
  },
};
</script>

<style lang="scss" scoped>
.time-ech {
  width: 100%;
  height: 85%;
}
</style>